<template>
  <div id="userLoginView">
    <h2 style="margin-bottom: 16px">用户登录</h2>
    <a-form
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
        style="max-width: 360px; margin: 0 auto"
    >
      <a-form-item field="userAccount" label="账号">
        <a-input
            v-model="form.userAccount"
            placeholder="请输入账号"
        />
      </a-form-item>
      <a-form-item field="userPassword" label="Post">
        <a-input-password v-model="form.userPassword" tooltip="密码不少于8位" placeholder="请输入密码"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="width: 120px">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">

import {reactive} from 'vue';
import {UserControllerService, UserLoginRequest} from "../../../generated";
import message from "@arco-design/web-vue/es/message"
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const form = reactive({
  userAccount: '',
  userPassword: '',
} as UserLoginRequest);

const router = useRouter();
const store = useStore();

const handleSubmit = async () => {
  const res = await UserControllerService.userLoginUsingPost(form);
  //登录成功，跳转到主页
  if (res.code === 0) {
    await store.dispatch("user/getLoginUser")
    router.push({
      path: "/",
      replace: true
    });
  } else {
    message.error("登录失败, " + res.message)
  }
  // alert(JSON.stringify(form))
};


</script>
